﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-input v-model="filterRuleName" placeholder="请输入规则名称" style="width:300px;" clearable></el-input>
                <el-select v-model="filterRuleType" placeholder="选择规则类型">
                    <el-option :key="-1" label="所有" :value="-1">
                    </el-option>
                    <el-option :key="0" label="会员等级" :value="0">
                    </el-option>
                    <el-option :key="1" label="微信分享量" :value="1">
                    </el-option>
                    <el-option :key="2" label="抖音分享量" :value="2">
                    </el-option>
                </el-select>
                <el-button type="primary" v-on:click="loadTableData" style="margin-left:10px;width:98px;">搜索</el-button>
                <el-button type="primary" v-on:click="showAdd">添加规则</el-button>
            </div>
        </el-col>
    </el-row>
    <hr class="line-gray" />
    <el-row>
        <div class="table-container">
            <el-table :data="takePartRules" style="width:100%">
                <el-table-column type="index" width="50" label="编号">

                </el-table-column>
                <el-table-column label="名称" width="200" property="name">

                </el-table-column>
                <el-table-column label="类型" width="100" property="ruleType">
                    <template slot-scope="scope">
                        <span v-if="scope.row.ruleType===0" >会员等级</span>
                        <span v-else-if="scope.row.tuleType===1" >微信分享量</span>
                        <span v-else >抖音分享量</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员等级" width="120" property="wxShareCount">
                    <template slot-scope="scope">
                        <div v-if="scope.row.ruleType===0">
                            <span v-if="scope.row.memberLevel===0">普通会员</span>
                            <span v-else-if="scope.row.memberLevel===1" style="color:#606266">白银会员</span>
                            <span v-else-if="scope.row.memberLevel===2" style="color:#E6A23C">黄金会员</span>
                            <span v-else style="color:#409EFF">钻石会员</span>
                        </div>
                        <div v-else>
                            <span>----</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="微信分享量" width="120" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.ruleType===1">{{scope.row.wxShareCount}}</span>
                        <span v-else>----</span>
                    </template>
                </el-table-column>
                <el-table-column label="抖音分享量" width="120" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.ruleType===2">{{scope.row.wxShareCount}}</span>
                        <span v-else>----</span>
                    </template>
                </el-table-column>
                <el-table-column label="活动" width="100" property="isActive">
                    <template slot-scope="scope">
                        <el-checkbox v-on:checked="scope.row.isActive" v-model="scope.row.isActive" v-on:change="isActiveChange(scope.row)"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" v-on:click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" v-on:click="deleteRule(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-row>

    <!--编辑对话框-->
    <el-dialog :title="dialogTitle" :visible="addDialogVisible" :close-on-click-modal="false" v-on:close=" closeDialog" width="800px">
        <el-form :model="rule" :label-width="formLabelWidth" ref="ruleForm" :rules="valiRules">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model.trim="rule.name" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content  bg-purple-dark">
                        <el-form-item label="规则类型" >
                            <el-select v-model="rule.ruleType" placeholder="选择规则类型">
                                <el-option :key="0" label="会员等级" :value="0">
                                </el-option>
                                <el-option :key="1" label="微信分享量" :value="1">
                                </el-option>
                                <el-option :key="2" label="抖音分享量" :value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content  bg-purple-dark">
                        <el-form-item label="活动" >
                            <el-switch v-model="rule.isActive"
                                       activge-color="#13ce66"
                                       inactive-color="#ff4949">
                            </el-switch>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" v-show="rule.ruleType===0">
                    <div class="grid-content  bg-purple-dark">
                        <el-form-item label="会员等级" >
                            <el-select v-model="rule.memberLevel" placeholder="会员规则" >
                                <el-option :key="0" label="普通会员" :value="0">
                                </el-option>
                                <el-option :key="1" label="白银会员" :value="1">
                                </el-option>
                                <el-option :key="2" label="黄金会员" :value="2">
                                </el-option>
                                <el-option :key="3" label="钻石会员" :value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24" v-show="rule.ruleType===1">
                    <div class="grid-content  bg-purple-dark">
                        <el-form-item label="微信分享量" prop="wxShareCount">
                            <el-input v-model.number="rule.wxShareCount" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24" v-show="rule.ruleType===2">
                    <div class="grid-content  bg-purple-dark">
                        <el-form-item label="抖音分享量" prop="dyShareCount">
                            <el-input v-model.number="rule.dyShareCount" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="closeDialog">取 消</el-button>
            <el-button type="primary" v-on:click="save">保存</el-button>
        </div>
    </el-dialog>
</div>
<script>
    // 自定义验证
    // 验证微信分享量
    var valiWX = (rule, value, callback) => {
        console.log(rule);
        console.log(value);
        console.log(callback);
        debugger;
        if (!value && value!==0) {
            callback(new Error('请输微信分享量'));
        };
        if (!Number.isInteger(value) || value <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    };

    // 验证抖音分享量
    var valiDY = (rule, value, callback) => {
        if (!value && value !==0) {
            callback(new Error('请输入抖音分享量'));
        };
        if (!Number.isInteger(value) || value <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    };

    var app = new Vue({
        el: "#app",
        data: {
            userType: null,  // 用户类型
            insId: null,
            filterRuleName: '',
            filterRuleType: null,
            addDialogVisible: false,
            dialogTitle: '',
            actionType: '创建',
            takePartRules: [],
            formLabelWidth: '100px',
            rule: {
                id: null,
                name: '',
                ruleType: 0,
                memberLevel: 0,
                wxShareCount: 10,
                dyShareCount: 10,
                insId: 0,
                isActive: true
            },
            // 验证规则
            valiRules: {
                name: [
                    { required: true, message: '请输入规则名称',trigger:'blur' }
                ],
                wxShareCount: [
                    { validator: valiWX, trigger: 'blur' }
                ],
                dyShareCount: [
                    { validator: valiDY, trigger: 'blur' }
                ]
            }
        },
        methods: {
            // 显示添加对话框
            showAdd() {  // 显示添加对话框
                let vm = this;
                vm.addDialogVisible = true;
                vm.dialogTitle = '新建规则';
                vm.actionType = '创建';
            },

            // 显示编辑对话框
            edit(index, row) {  // 修改
                let vm = this;
                vm.loadSingleRule(row.id).then(() => {
                    vm.addDialogVisible = true;
                    vm.dialogTitle = '编辑规则';
                    vm.actionType = '编辑';
                })
            },

            // 保存
            save() {
                let vm = this;
                let validFields = ['name'];
                if (vm.rule.ruleType === 1) {
                    validFields.push('wxCount');
                }
                if (vm.rule.ruleType === 2) {
                    validFields.push('dyCount');
                }
                vm.rule.insId = vm.insId;
                vm.$refs['ruleForm'].validateField(validFields, validStr => {
                    if (!validStr) {
                        axios.post(`/app/rule/save`, vm.rule)
                            .then(res => {
                                if (res.data.code === 0) {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    vm.loadTableData();
                                    vm.closeDialog();
                                }
                                else {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            })
                    }
                });
            },

            // 表格中"活动"选中改变
            isActiveChange(row) { 
                let vm = this;
                debugger;
                let value = null;
                if (row.isActive) {
                    value = 'true';
                }
                else {
                    value = 'false';
                }
                axios.get(`/api/rule/switch-isActive?id=${row.id}&value=${value}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            vm.$message({
                                message: res.data.msg,
                                type:'success'
                            });
                        }
                        else {
                            vm.$message({
                                message:res.data.msg,
                                type:'error'
                            });
                        }
                    });
            },

            // 删除规则
            deleteRule(index, row) {
                var that = this;
                that.$confirm('角色将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/rule/delete-rule?Id=${row.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                that.addDialogVisible = false;
                                that.loadTableData();
                            }
                            else {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        });
                });
            },

            // 加载表格数据
            loadTableData() {
                let vm = this;
                debugger;
                axios.get(`/api/rule/get-rule-list?insId=${vm.insId}&name=${vm.filterRuleName}&type=${vm.filterRuleType}`)
                    .then((res) => {
                        vm.takePartRules = res.data.data;
                    });
            },

            // 加载单个规则
            loadSingleRule(id) {
                let vm = this;
                return new Promise(resolve => {
                    axios.get(`/api/rule/get-sigle-rule?id=${id}`)
                        .then(res => {
                            if (res.data.code === 0) {
                                vm.rule = res.data.data;
                                resolve();
                            }
                            else {
                                vm.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                });
            },

            // 关闭对话框
            closeDialog() {
                let vm = this;
                vm.addDialogVisible = false;
                vm.$refs['ruleForm'].resetFields();
                vm.rule.id=null;
                vm.rule.name = null;
                vm.rule.ruleType = 0;
                vm.rule.memberLevel = 0;
                vm.rule.wxShareCount = 10;
                vm.rule.dyShareCount = 10;
                vm.rule.insId = 0;
                vm.rule.isActive = false;
            }
        },
        created() {
            let vm = this;
            vm.userType = @ViewBag.UserType;
            if (vm.userType === 1) {
                vm.insId = @ViewBag.InsId
            }
            vm.loadTableData();
        },
        mounted() {

        }
    });

    
</script>
<style>

</style>